<script setup lang="ts">
// 饱了么应用根组件
import { onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useMerchantStore, useThemeStore } from "@/store";
import {
  isMerchant,
  isLoggedIn,
  isTokenExpired,
  isAdmin,
  clearAuth,
} from "@/utils/auth";
import { ElMessage } from "element-plus";

const route = useRoute();
const router = useRouter();
const merchantStore = useMerchantStore();
const themeStore = useThemeStore();

// 调试函数：清除登录信息
const clearLoginInfo = () => {
  console.log("清除登录信息");
  clearAuth();
};

// 如果需要清除登录信息，取消下面这行的注释
// clearLoginInfo();

onMounted(() => {
  // 根据当前路由初始化主题
  themeStore.initTheme(route.path);

  const initializeApp = async () => {
    try {
      // 检查登录状态
      if (isLoggedIn()) {
        console.log("App.vue: 用户已登录，检查token是否过期");

        // 检查token是否过期
        if (isTokenExpired()) {
          console.log("App.vue: Token已过期，清除认证信息并提示用户");
          clearAuth();
          ElMessage.error("登录已过期，请重新登录");
          if (route.meta.requiresAuth) {
            console.log("App.vue: 当前页面需要认证，重定向到首页");
            router.push("/");
          }
          return;
        }

        // 只有在用户已登录且是商家用户时，才初始化店铺信息
        if (isMerchant()) {
          console.log("App.vue: 用户是商家，初始化店铺信息");
          await merchantStore.fetchStores();
        }
      } else {
        console.log("App.vue: 用户未登录");
      }
    } catch (error) {
      console.error('App 初始化失败:', error);
    }
  };
  
  initializeApp();

  // 监听路由变化，切换对应主题
  router.afterEach((to) => {
    themeStore.initTheme(to.path);
  });
});
</script>

<template>
  <router-view />
</template>

<style>
html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  width: 100%;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
}

#app {
  min-height: 100vh;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 顾客端亮色主题 */
body.customer-light-theme {
  height:auto;
  background-color: #fefdf8;
  color: #2d2d2d;
}

body.customer-light-theme #app {
  background-color: #fefdf8;
  color: #2d2d2d;
}

/* 顾客端暗色主题 */
body.customer-dark-theme {
  height: auto;
  background-color: #2a2a2a;
  color: #f0f0f0;
}

body.customer-dark-theme #app {
  background-color: #2a2a2a;
  color: #f0f0f0;
}

/* 商家端主题 */
body.merchant-layout-body {
  background-color: var(--bg-body, #e3fcec);
  color: var(--text-primary, #1a2233);
}

body.merchant-layout-body #app {
  background-color: var(--bg-body, #e3fcec);
  color: var(--text-primary, #1a2233);
}

/* 管理员主题 */
body.admin-layout-body {
  background-color: #f0f2f5;
  color: #1f2328;
}

body.admin-layout-body #app {
  background-color: #f0f2f5;
  color: #1f2328;
}

/* 确保容器使用正确的背景色 */
.el-container {
  background-color: inherit !important;
  transition: background-color 0.3s ease;
}

.el-main {
  background-color: inherit !important;
  transition: background-color 0.3s ease;
}

.el-aside {
  background-color: var(--bg-default, inherit) !important;
  transition: background-color 0.3s ease;
}

.el-header {
  background-color: var(--bg-default, inherit) !important;
  transition: background-color 0.3s ease;
}

/* 为Element Plus组件添加过渡效果 */
.el-card {
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.el-button {
  transition: all 0.3s ease;
}

.el-input {
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.el-dropdown-menu {
  transition: background-color 0.3s ease;
}

/* 通用过渡类 */
* {
  transition-property: background-color, color, border-color, box-shadow;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
</style>
